<template>
  <div class="theme-selector">
    <div class="panel-header">
      <h4>主题设置</h4>
    </div>
    
    <div class="theme-content">
      <!-- 预设主题 -->
      <div class="theme-section">
        <h5>预设主题</h5>
        <div class="theme-grid">
          <div 
            v-for="theme in presetThemes"
            :key="theme.id"
            class="theme-item"
            :class="{ 'active': currentTheme.id === theme.id }"
            @click="selectTheme(theme)">
            <div class="theme-preview">
              <div 
                v-for="(color, index) in theme.colors.slice(0, 4)"
                :key="index"
                class="color-block"
                :style="{ backgroundColor: color }">
              </div>
            </div>
            <span class="theme-name">{{ theme.name }}</span>
          </div>
        </div>
      </div>
      
      <!-- 自定义颜色 -->
      <div class="theme-section">
        <h5>自定义颜色</h5>
        <div class="color-customizer">
          <div 
            v-for="(color, index) in currentTheme.colors"
            :key="index"
            class="color-picker-item">
            <label>颜色 {{ index + 1 }}</label>
            <el-color-picker 
              v-model="currentTheme.colors[index]"
              @change="updateTheme" />
          </div>
          
          <div class="color-actions">
            <el-button size="small" @click="addColor">添加颜色</el-button>
            <el-button 
              size="small" 
              type="danger" 
              :disabled="currentTheme.colors.length <= 2"
              @click="removeColor">
              删除颜色
            </el-button>
          </div>
        </div>
      </div>
      
      <!-- 字体设置 -->
      <div class="theme-section">
        <h5>字体设置</h5>
        <el-form label-width="80px" size="small">
          <el-form-item label="字体族">
            <el-select v-model="currentTheme.fontFamily" @change="updateTheme">
              <el-option label="默认" value="inherit" />
              <el-option label="微软雅黑" value="Microsoft YaHei" />
              <el-option label="苹方" value="PingFang SC" />
              <el-option label="思源黑体" value="Source Han Sans" />
              <el-option label="Arial" value="Arial" />
              <el-option label="Helvetica" value="Helvetica" />
            </el-select>
          </el-form-item>
          
          <el-form-item label="基础大小">
            <el-input-number 
              v-model="currentTheme.fontSize"
              :min="10"
              :max="20"
              @change="updateTheme" />
          </el-form-item>
        </el-form>
      </div>
      
      <!-- 图表样式 -->
      <div class="theme-section">
        <h5>图表样式</h5>
        <el-form label-width="80px" size="small">
          <el-form-item label="圆角">
            <el-input-number 
              v-model="currentTheme.borderRadius"
              :min="0"
              :max="20"
              @change="updateTheme" />
          </el-form-item>
          
          <el-form-item label="阴影">
            <el-switch 
              v-model="currentTheme.shadow"
              @change="updateTheme" />
          </el-form-item>
          
          <el-form-item label="网格线">
            <el-switch 
              v-model="currentTheme.gridLines"
              @change="updateTheme" />
          </el-form-item>
          
          <el-form-item label="动画">
            <el-switch 
              v-model="currentTheme.animation"
              @change="updateTheme" />
          </el-form-item>
        </el-form>
      </div>
      
      <!-- 主题操作 -->
      <div class="theme-actions">
        <el-button @click="resetTheme">重置</el-button>
        <el-button type="primary" @click="saveTheme">保存主题</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { useTableStore } from '../stores/tableStore'
import { ElMessage } from 'element-plus'

const tableStore = useTableStore()

// 预设主题
const presetThemes = ref([
  {
    id: 'default',
    name: '默认',
    colors: ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399'],
    fontFamily: 'inherit',
    fontSize: 14,
    borderRadius: 4,
    shadow: true,
    gridLines: true,
    animation: true
  },
  {
    id: 'business',
    name: '商务',
    colors: ['#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd'],
    fontFamily: 'Microsoft YaHei',
    fontSize: 13,
    borderRadius: 2,
    shadow: false,
    gridLines: true,
    animation: false
  },
  {
    id: 'colorful',
    name: '多彩',
    colors: ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7'],
    fontFamily: 'PingFang SC',
    fontSize: 14,
    borderRadius: 8,
    shadow: true,
    gridLines: false,
    animation: true
  },
  {
    id: 'dark',
    name: '深色',
    colors: ['#36CFC9', '#722ED1', '#13C2C2', '#52C41A', '#FA8C16'],
    fontFamily: 'inherit',
    fontSize: 14,
    borderRadius: 6,
    shadow: true,
    gridLines: true,
    animation: true
  },
  {
    id: 'minimal',
    name: '简约',
    colors: ['#2C3E50', '#34495E', '#7F8C8D', '#95A5A6', '#BDC3C7'],
    fontFamily: 'Helvetica',
    fontSize: 13,
    borderRadius: 0,
    shadow: false,
    gridLines: false,
    animation: false
  }
])

// 当前主题
const currentTheme = ref({ ...presetThemes.value[0] })

// 方法
const selectTheme = (theme) => {
  currentTheme.value = { ...theme }
  updateTheme()
}

const updateTheme = () => {
  // 应用主题到全局
  applyThemeToDocument()
  
  // 更新所有可视化组件
  updateVisualizationThemes()
  
  ElMessage.success('主题已更新')
}

const applyThemeToDocument = () => {
  const root = document.documentElement
  
  // 设置CSS变量
  root.style.setProperty('--theme-primary', currentTheme.value.colors[0])
  root.style.setProperty('--theme-success', currentTheme.value.colors[1])
  root.style.setProperty('--theme-warning', currentTheme.value.colors[2])
  root.style.setProperty('--theme-danger', currentTheme.value.colors[3])
  root.style.setProperty('--theme-info', currentTheme.value.colors[4])
  
  root.style.setProperty('--theme-font-family', currentTheme.value.fontFamily)
  root.style.setProperty('--theme-font-size', `${currentTheme.value.fontSize}px`)
  root.style.setProperty('--theme-border-radius', `${currentTheme.value.borderRadius}px`)
  
  // 设置阴影
  if (currentTheme.value.shadow) {
    root.style.setProperty('--theme-box-shadow', '0 2px 8px rgba(0, 0, 0, 0.1)')
  } else {
    root.style.setProperty('--theme-box-shadow', 'none')
  }
}

const updateVisualizationThemes = () => {
  // 更新所有可视化组件的主题
  tableStore.reportConfig.visualizations.forEach(viz => {
    if (viz.type !== 'table') {
      // 更新图表颜色
      if (viz.type === 'pie') {
        viz.config.colors = [...currentTheme.value.colors]
      } else {
        viz.config.color = currentTheme.value.colors[0]
      }
      
      // 更新其他样式属性
      viz.config.theme = {
        fontFamily: currentTheme.value.fontFamily,
        fontSize: currentTheme.value.fontSize,
        borderRadius: currentTheme.value.borderRadius,
        shadow: currentTheme.value.shadow,
        gridLines: currentTheme.value.gridLines,
        animation: currentTheme.value.animation
      }
    }
  })
  
  // 触发重新渲染
  tableStore.reportConfig = { ...tableStore.reportConfig }
}

const addColor = () => {
  currentTheme.value.colors.push('#409EFF')
  updateTheme()
}

const removeColor = () => {
  if (currentTheme.value.colors.length > 2) {
    currentTheme.value.colors.pop()
    updateTheme()
  }
}

const resetTheme = () => {
  currentTheme.value = { ...presetThemes.value[0] }
  updateTheme()
}

const saveTheme = () => {
  // 保存自定义主题到本地存储
  const customTheme = {
    ...currentTheme.value,
    id: `custom_${Date.now()}`,
    name: `自定义主题_${new Date().toLocaleString()}`
  }
  
  const savedThemes = JSON.parse(localStorage.getItem('powerbi_themes') || '[]')
  savedThemes.push(customTheme)
  localStorage.setItem('powerbi_themes', JSON.stringify(savedThemes))
  
  ElMessage.success('主题已保存')
}

// 初始化时应用默认主题
updateTheme()
</script>

<style scoped>
.theme-selector {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: white;
}

.panel-header {
  padding: 16px;
  border-bottom: 1px solid #e4e7ed;
}

.panel-header h4 {
  margin: 0;
  color: #303133;
  font-size: 16px;
}

.theme-content {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
}

.theme-section {
  margin-bottom: 24px;
}

.theme-section h5 {
  margin: 0 0 12px 0;
  color: #303133;
  font-size: 14px;
  font-weight: 600;
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.theme-item {
  padding: 12px;
  border: 2px solid #e4e7ed;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.theme-item:hover {
  border-color: #409EFF;
}

.theme-item.active {
  border-color: #409EFF;
  background: #ecf5ff;
}

.theme-preview {
  display: flex;
  height: 20px;
  margin-bottom: 8px;
  border-radius: 4px;
  overflow: hidden;
}

.color-block {
  flex: 1;
}

.theme-name {
  font-size: 12px;
  color: #606266;
}

.color-customizer {
  space-y: 12px;
}

.color-picker-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.color-picker-item label {
  font-size: 13px;
  color: #606266;
}

.color-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.theme-actions {
  display: flex;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid #e4e7ed;
}

.theme-actions .el-button {
  flex: 1;
}
</style>

